import React,{memo} from 'react'
import "../../assets/Layout/tongzhi.scss"
import { Button,Input,Select } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import FriendRTb from './model/friendRTb'

function UserBox(){
  let unme = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
  const itemsVte = ()=>{
    let list = unme.map(()=> <FriendRTb/>)
    return <div>{list}</div>;
  };


  return <>
     <div className="friend-main">
       <div className="friend-l">
         <div className="friend-l-item">
           <div>全部好友</div>
           <div>10</div>
         </div>
         <div className="friend-l-fenzu">分组</div>
         <div className="friend-l-list-main">
           <div className="friend-l-item2">
             <div>全部好友</div>
             <div>10</div>
           </div>
           <div className="friend-l-item2">
             <div>全部好友</div>
             <div>10</div>
           </div>
           <div className="friend-l-item2">
             <div>全部好友</div>
             <div>10</div>
           </div>
           <div className="friend-l-item2">
             <div>全部好友</div>
             <div>10</div>
           </div>
           <div className="friend-l-item2">
             <div>全部好友</div>
             <div>10</div>
           </div>
           <div className="friend-l-item2">
             <div>全部好友</div>
             <div>10</div>
           </div>
           <div className="friend-l-item2">
             <div>全部好友</div>
             <div>10</div>
           </div>
           <div className="friend-l-item2">
             <div>全部好友</div>
             <div>10</div>
           </div>
           <div className="friend-l-item2">
             <div>全部好友</div>
             <div>10</div>
           </div>
           <div className="friend-l-item2">
             <div>全部好友</div>
             <div>10</div>
           </div>
           <div className="friend-l-item2">
             <div>全部好友</div>
             <div>10</div>
           </div>
           <div className="friend-l-item2">
             <div>全部好友</div>
             <div>10</div>
           </div>
           <div className="friend-l-item2">
             <div>全部好友</div>
             <div>10</div>
           </div>
           <div className="friend-l-item2">
             <div>全部好友</div>
             <div>10</div>
           </div>
           <div className="friend-l-item2">
             <div>全部好友</div>
             <div>10</div>
           </div>


         </div>
         <Button icon={<PlusOutlined />} className="add-fenzu">
           添加好友分组</Button>
       </div>
       <div className="friend-r">
          <div className="friend-r-box">
            <Input
              className="friend-input"
              placeholder="请输入好友名称"
              prefix={<i className="iconfont mt-31sousuo"
                         style={{ color: 'rgba(0,0,0,.25)' }} />}
            />
          </div>
         <div className="friend-r-table">
           <div className="friend-r-th">
             <div className="th-item">昵称</div>
             <div className="th-item">备注</div>
             <div className="th-item">分组</div>
             {/*<div className="th-item">好友权限</div>*/}
           </div>
           <div className="friend-body">
             {itemsVte()}
           </div>
         </div>

       </div>

     </div>
  </>
}

export default memo(UserBox);
